<template>
	<view class="custom-tab-bar">
		<view 
			v-for="(item, index) in currentTabs" 
			:key="index"
			class="tab-item"
			:class="{ active: current === index }"
			@tap="switchTab(index, item.pagePath)"
		>
			<view v-if="item.pagePath === 'pages/booking-select/booking-select'" class="mid-button">
				<image :src="item.iconPath" mode="aspectFit"></image>
				<text>{{ item.text }}</text>
			</view>
			<view v-else class="normal-item">
				<image :src="current === index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
				<text>{{ item.text }}</text>
				<view v-if="item.badge" class="badge">{{ item.badge }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabBar',
	data() {
		return {
			current: 0,
			customerTabs: [],
			technicianTabs: [],
			role: '',
			unreadCount: 0
		}
	},
	computed: {
		currentTabs() {
			return this.role === 'technician' ? this.technicianTabs : this.customerTabs
		}
	},
	created() {
		// 获取当前角色
		const userInfo = uni.getStorageSync('userInfo')
		this.role = userInfo.role || 'customer'
		
		// 初始化导航配置
		this.initTabs()
		
		// 监听消息数量变化
		uni.$on('updateUnreadCount', this.updateUnreadCount)
	},
	beforeDestroy() {
		uni.$off('updateUnreadCount', this.updateUnreadCount)
	},
	methods: {
		initTabs() {
			const customerTabBar = {
				color: "#999999",
				selectedColor: "#2B87FF",
				backgroundColor: "#ffffff",
				borderStyle: "black",
				list: [
					{
						pagePath: "pages/index/index",
						text: "首页",
						iconPath: "/static/home.png",
						selectedIconPath: "/static/home_active.png"
					},
					{
						pagePath: "pages/collaboration/collaboration",
						text: "合作",
						iconPath: "/static/collaboration.png",
						selectedIconPath: "/static/collaboration_active.png"
					},
					{
						pagePath: "pages/booking-select/booking-select",
						text: "预约",
						iconPath: "/static/subscrib.png",
						selectedIconPath: "/static/subscrib.png"
					},
					{
						pagePath: "pages/project/project",
						text: "项目",
						iconPath: "/static/project.png",
						selectedIconPath: "/static/project_active.png"
					},
					{
						pagePath: "pages/my/my",
						text: "我的",
						iconPath: "/static/my.png",
						selectedIconPath: "/static/my_active.png"
					}
				]
			}

			const technicianTabBar = {
				color: "#999999",
				selectedColor: "#2B87FF",
				backgroundColor: "#ffffff",
				borderStyle: "black",
				list: [
					{
						pagePath: "pages/technician/home",
						text: "工作台",
						iconPath: "/static/tech/home.png",
						selectedIconPath: "/static/tech/home_active.png"
					},
					{
						pagePath: "pages/technician/time",
						text: "接时",
						iconPath: "/static/tech/time.png",
						selectedIconPath: "/static/tech/time_active.png"
					},
					{
						pagePath: "pages/technician/order",
						text: "接单",
						iconPath: "/static/tech/order.png",
						selectedIconPath: "/static/tech/order_active.png"
					},
					{
						pagePath: "pages/technician/message",
						text: "消息",
						iconPath: "/static/tech/message.png",
						selectedIconPath: "/static/tech/message_active.png",
						badge: 0
					},
					{
						pagePath: "pages/technician/my",
						text: "我的",
						iconPath: "/static/tech/my.png",
						selectedIconPath: "/static/tech/my_active.png"
					}
				]
			}

			this.customerTabs = customerTabBar.list
			this.technicianTabs = technicianTabBar.list
			
			// 设置当前选中的tab
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const currentPath = currentPage ? currentPage.route : ''
			
			this.currentTabs.forEach((item, index) => {
				if (item.pagePath === currentPath) {
					this.current = index
				}
			})
		},
		
		switchTab(index, path) {
			if (this.current !== index) {
				this.current = index
				uni.switchTab({
					url: '/' + path
				})
			}
		},
		
		updateUnreadCount(count) {
			this.unreadCount = count
			if (this.role === 'technician') {
				// 更新技师消息tab的badge
				const messageTab = this.technicianTabs.find(tab => tab.pagePath === 'pages/technician/message')
				if (messageTab) {
					messageTab.badge = count > 0 ? count : ''
				}
			}
		}
	}
}
</script>

<style lang="scss">
.custom-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		
		&.active {
			color: #2B87FF;
		}
		
		.normal-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
			
			text {
				font-size: 24rpx;
				color: inherit;
			}
			
			.badge {
				position: absolute;
				top: 0;
				right: 50%;
				transform: translateX(20rpx);
				background: #FF4D4F;
				color: #FFFFFF;
				font-size: 20rpx;
				padding: 0 8rpx;
				height: 28rpx;
				min-width: 28rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.mid-button {
			width: 120rpx;
			height: 120rpx;
			background: linear-gradient(to bottom, #FFD54F, #FFA726);
			border-radius: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: -40rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			
			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
			
			text {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style> 